<script setup>
import * as echarts from 'echarts';
import { mainStore } from '@/store/index';
import 'echarts-liquidfill';
import { onMounted} from 'vue';
let chartInstance;
const store = mainStore();
const initEchart = () => {
  //获取对应的dom元素
  const el = document.querySelector('.liquidfill')
  // 初始化
  chartInstance = echarts.init(el)
  // 设置option
  chartInstance.setOption({
    series: [{
      type: 'liquidFill',
      data: [{
        value: 0.6,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0, //0%时的颜色 从上往下看 最上面是0%
              color: 'RGB(26,108,176)'
            }, {
              offset: 1, //100%时的颜色 从上往下看 最上面是0%
              color: 'RGB(25,126,173)'
            }],),
          }
        }
      }, {
        value: 0.55,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0, //0%时的颜色 从上往下看 最上面是0%
              color: 'RGB(47,192,155)'
            }, {
              offset: 1, //100%时的颜色 从上往下看 最上面是0%
              color: 'RGB(16,107,190)'
            }],),
          }
        }
      }],
      backgroundStyle: {
        borderWidth: 1,
        color: "transparent",
      },
      center: ['50%', '50%'], //在画布中的位置
      radius: '85%',
      label: {
        normal: {
          formatter: () => {
            let res = ((store.produce.wanchengliang / store.produce.jihualiang) * 100).toFixed(0)
            if (res > 100) {
              res = 100
            }
            return res + '%';
          },
          position: ['50%', '25%'],
          //fontSize:80    //这里也可以设置
          color: 'RGB(9,215,162)',
          textStyle: {
            fontSize: 23, //修改字体大小
            // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //     offset: 0,
            //     color: 'red'
            // }, {
            //     offset: 1,
            //     color: 'blue'
            // }])
          }
        }
      },
      outline: {
        show: false, //是否显示外圈线
        borderDistance: 5, //与外圈距离
        itemStyle: {
          color: 'none',
          borderColor: 'rgb(78,161,255)', //线的颜色，粗细，模糊程度，模糊颜色
          borderWidth: 3,
          // shadowBlur: 0,
          // shadowColor: 'rgba(0, 0, 0, 0.25)'
        }
      },
      backgroundStyle: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0,
            color: 'rgba(0,24,55, 0)'
          },
          {
            offset: 0.75,
            color: 'rgba(0,24,55, 0)'
          },
          {
            offset: 1,
            color: 'rgba(37,237,259, 1)'
          }],
          globalCoord: false
        },
      },
    }]
  })
}
onMounted(() => {
  setTimeout(() => {
    initEchart();
    window.addEventListener("resize", () => {
      chartInstance.dispose();
      initEchart();
    });
  }, 500);
}) 
</script>

<template>
  <div class="NaturalGasProcessing">
    <div class="header">
      <div class="title"></div>
    </div>
    <div class="unit">单位:吨</div>
    <div class="iframe">
      <div class="data">
        <div class="liquidfill"></div>
      </div>
      <div class="pedestal">
        <div class="item">
          <div class="title">计划量</div>
          <div class="number">{{ store.produce.jihualiang }}</div>
        </div>
        <div class="item">
          <div class="title">完成量</div>
          <div class="number">{{ store.produce.wanchengliang }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.NaturalGasProcessing {
  width: 32%;
  height: 100%;
  background-image: url("@/assets/smallCard.png");
  background-size: 100% 100%;
  position: relative;

  .header {
    height: .2031rem;
    width: 100%;
    display: flex;

    .title {
      height: .2031rem;
      width: 40%;
      display: inline-block;
      background-image: url('@/assets/title/produce.png');
      background-repeat: no-repeat;
      background-size: 0.62rem .1406rem;
      background-position: .0521rem 50%;
    }
  }

  .unit {
    position: absolute;
    font-size: 0.06rem;
    font-weight: 500;
    color: #FFFFFF;
    right: 15%;
  }

  .iframe {
    height: calc(100% - .2031rem);
    width: 100%;
    display: flex;
    flex-direction: column;

    .data {
      width: 100%;
      height: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url('@/assets/liquidfillBg.png');
      background-size: 50% 100%;
      background-repeat: no-repeat;
      background-position: center center;

      // 水球
      .liquidfill {
        width: 80%;
        height: 80%;

        :deep(canvas) {
          border-radius: 50%;
        }
      }
    }

    .pedestal {
      width: 100%;
      height: 40%;
      background-image: url('@/assets/pedestal.png');
      background-size: 90% 50%;
      background-repeat: no-repeat;
      background-position: center 25%;
      display: flex;
      justify-content: space-around;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .title {
          font-size: 0.06rem;
          font-weight: 500;
          color: #C8D7DF;
          line-height: 0.11rem;
          display: flex;
        }

        .title::before {
          content: '';
          display: inline-block;
          width: 0.13rem;
          height: 0.13rem;
          background-image: url('@/assets/rhombus.png');
          background-size: 100% 100%;
        }

        .number {
          font-size: 0.1rem;
          font-weight: 400;
          color: #3CEAFF;
          text-align: center;
          background: linear-gradient(0deg, #FFFFFF 0%, #3CFFCA 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}
</style>